<template>
  <div class="mt-50px">
    <div class="h-140px cursor-pointer" @click="visible = true">
      <img src="../../assets/images/ai-door@2x.png" alt="" class="w-full h-full"/>
    </div>
    <el-dialog v-model="visible" width="550" :show-close="false" modal-class="ai-dialog" append-to-body>
      <template #header="{ close }">
        <div class="flex pr-18px pt-13px">
          <img
            src="../../assets/images/ai-dialog-close@2x.png"
            class="w-26px h-26px float-right ml-auto"
            alt=""
            @click="close"
          />
        </div>
      </template>
      <div class="flex">
        <img src="../../assets/images/ai-dialog-left@2x.png" alt="" class="w-275px h-310px" />
        <div class="flex flex-col ml-37px items-center justify-center">
          <img src="../../assets/images/ai-dialog-qr@2x.png" class="w-192px h-192px" alt="" />
          <div class="mt-22px text-#454545 text-16px lh-16px">扫描二维码，体验AI测评</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
const visible = ref(false);
</script>

<style lang="scss">
.ai-dialog {
  .el-dialog {
    @apply p-0 rounded-10px;
    .el-dialog__header {
      @apply absolute right-0;
    }
  }
}
</style>
